import React, { useEffect, useRef } from 'react'
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
export const VR = (props) => {
    var scene, camera, renderer;
    let looks = useRef(null);
    let e = 'https://vrlab-image2.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_b.jpg?imageMogr2/quality/70'
    let c = 'https://vrlab-image1.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_u.jpg?imageMogr2/quality/70'
    let b = 'https://vrlab-image2.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_r.jpg?imageMogr2/quality/70'
    let a = 'https://vrlab-image1.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_l.jpg?imageMogr2/quality/70'
    let f = 'https://vrlab-image1.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_f.jpg?imageMogr2/quality/70'
    let d = 'https://vrlab-image2.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_d.jpg?imageMogr2/quality/70'
    function initThree() {
        //场景
        scene = new THREE.Scene();
        //镜头
        camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100);
        camera.position.set(0, 0, 0.01);
        //渲染器
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(document.body.clientWidth, document.body.clientHeight);
        document.getElementById("VR").appendChild(renderer.domElement);
        //镜头控制器
        var controls = new OrbitControls(camera, renderer.domElement);
        controls.target = new THREE.Vector3(0, 0, 0);//控制焦点
        controls.autoRotate = false;//将自动旋转关闭
        var clock = new THREE.Clock();//用于更新轨道控制器
        var elta = clock.getDelta();//获取时间差
        controls.update(elta);//更新时间
        looks.current.appendChild(renderer.domElement)
        var materials = [];
        //根据左右上下前后的顺序构建六个面的材质集
        var texture_left = new THREE.TextureLoader().load(a);
        materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));

        var texture_right = new THREE.TextureLoader().load(b);
        materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));

        var texture_top = new THREE.TextureLoader().load(c);
        materials.push(new THREE.MeshBasicMaterial({ map: texture_top }));

        var texture_bottom = new THREE.TextureLoader().load(d);
        materials.push(new THREE.MeshBasicMaterial({ map: texture_bottom }));

        var texture_front = new THREE.TextureLoader().load(e);
        materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));

        var texture_back = new THREE.TextureLoader().load(f);
        materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));

        var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), materials);
        scene.add(box);
        //一会儿在这里添加3D物体
        box.geometry.scale(1, 1, -1);
        loop();
    }
    //帧同步重绘
    function loop() {
        requestAnimationFrame(loop);
        renderer.render(scene, camera);
    }
    useEffect(() => {
        initThree()
    })
    return (
        <div ref={looks} id="VR" style={{ width: '100%', height: '100%' }}>
        </div>
    )
}
